// 获取初始数据
$.ajax({
    url: '/noinfo/search_watch_get/',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // var all_num = data.all_num;
        var type1 = data.type1;
        var watchs = data.watchs;
        var updating = data.updating;
        var status_num = data.status_num;
        tableUpdate(watchs);
        chartPie(type1);
        chartBar(status_num);
        var arrWeek = ["周一","周二","周三","周四","周五","周六","周日"];
        $.each(updating, function(index, item) {
            var week = arrWeek[item.week-1];
            var titles = item.titles.replace(',', ' '.repeat(5));
            $('#updating-week').append($('<div>').text(week).addClass('week'));
            $('#updating-titles').append($('<div>').text(titles).addClass('titles'));
        });
    }
});

// 饼图
function chartPie(type1) {
    var chart = echarts.init(document.getElementById('chart-pie'), 'wonderland');
    var option = {
        color: ['#1E90FF', '#00AC6B', '#808080', '#84C9EF'],
        series: [
          {
            name: '类型',
            type: 'pie',
            radius: [50, 120],
            center: ['50%', '50%'],
            itemStyle: {
                borderRadius: 10,
            },
            label: {
                show: true,
                fontSize: '14', // 设置字体大小
                position: 'inner',
                color: '#fff',
                fontFamily: '微软雅黑 Light',
                fontWeight: 'bold',
                formatter: '{b}\n{c}' ,
            },
            // roseType: 'stack',
            data: type1.map(function(item) {
                return {name:item.type, value:item.count};
            })
          }
        ]
      };
    chart.setOption(option);
}

// 条形图
function chartBar(data) {
    var chart = echarts.init(document.getElementById('chart-bar'));
    var option = {
            title: {
                text: '在看',
                left: 0,
                top: '30',
                textStyle: {
                    fontFamily: "Microsoft YaHei Light",
                    fontSize: '18'
                }
            },
            color: ['#1E90FF', '#00AC6B'],
            legend: {  
                show: true,
                left: 'auto', // 自动计算左侧位置    
                right: '10%', // 设置图例距离右侧 10% 的位置  
                bottom: '25%', // 设置图例距离底部 10% 的位置 
                textStyle: {  
                    fontFamily: '微软雅黑 Light',
                    fontWeight: 'bold',
                    fontSize: '14', 
                }  
                
            }, 
            grid: {
                left: '20%',
            },
            xAxis: {
                type: 'value',
                axisTick: {  
                    show: false // 隐藏坐标轴刻度  
                },
                axisLabel: {  
                    show: false // 隐藏轴标签  
                },
                splitLine: { // 这个属性可以隐藏网格线  
                    show: false  
                }
            },
            yAxis: {
                type: 'category',
                axisTick: {  
                    show: false // 隐藏坐标轴刻度  
                },
                axisLabel: {  
                    show: true, // 隐藏轴标签 
                    fontSize: 16,
                    fontWeight: 'bold',
                    fontFamily: "SimHei",
                    color: '#1E90FF'
                },
                axisLine: {  
                    show: false // 隐藏背景线  
                },
                data: data.map(function(item) {
                    return item.type;
                })
            },
            series: [{
                name: '1次',
                data: data.map(function(item) {
                    return item.time1;
                }),
                type: 'bar',
                stack: '总量',
                label: {  
                    show: true,  
                    color: '#fff',
                    fontFamily: '微软雅黑 Light',
                    fontWeight: 'bold',
                    fontSize: '14',
                    position: 'inside', // 标签在柱形内部  
                    align: 'center', // 水平居中  
                    verticalAlign: 'middle', // 垂直居中 
                    formatter: function(params) {  
                        if (params.value > 0) {  
                            return params.value;  
                        } else {  
                            return '';
                        }
                    }
                },
                barWidth: 20, 
                itemStyle: {  
                    barBorderRadius: 10
                }
            },
            {
                name: '2次',
                data: data.map(function(item) {
                    return item.time2;
                }),
                type: 'bar',
                stack: '总量',
                label: {  
                    show: true, 
                    color: '#fff',
                    fontFamily: '微软雅黑 Light',
                    fontWeight: 'bold',
                    fontSize: '14',
                    position: 'inside', // 标签在柱形内部  
                    align: 'center', // 水平居中  
                    verticalAlign: 'middle', // 垂直居中  
                    formatter: function(params) {  
                        if (params.value > 0) {  
                            return params.value;  
                        } else {  
                            return '';
                        }
                    }
                },
                barWidth: 20, // 柱宽20  
                itemStyle: {  
                        barBorderRadius: 10
                }
            }]
        };
    chart.setOption(option);
}

// 类型点击
$('#anime, #movie, #novel, #teleplay').click(function(event) {
    // 恢复所有按钮原样式
    $('button').removeClass('type-on');

    // 当前点击的按钮添加active类
    $(event.target).addClass('type-on');

    clickPost();
})

// 状态点击
$('#all, #ing').click(function(event) {
    // 恢复所有按钮原样式
    $('button').removeClass('status-on');
    // 当前点击的按钮添加active类
    $(event.target).addClass('status-on');

    clickPost();
})

// 搜索框模糊搜索
$('#search-box').on('input', function() {
    clickPost();
})

// POST获取数据库数据
function clickPost() {
    // 获取按钮ID
    var nameVal = $("#search-box").val();
    var statusId = $("button.status-on").attr('id');
    var typeId = $("button.type-on").attr('id');
    // 发送AJAX请求
    $.ajax({
        url: '/noinfo/search_watch_post/',
        type: 'POST',
        dataType: 'json',
        data: { 
            name_val: nameVal,
            type_id: typeId,
            status_id: statusId
        },
        success: function(data) {
            tableUpdate(data);
        }
        });
}

// 更新表格数据
function tableUpdate(data) {
    // 清空表格数据
    $('#table tbody').empty();
    // 遍历数据，构建新的表格行
    $.each(data, function(index, item) {
        var row = $('<tr>');
        var start = new Date(item.date_watch_start);
        var end = new Date(item.date_watch_end);
        var date_watch = '';
        var duration = '';
        if (end.getFullYear() == '1970') {
            duration = '在看';
            date_watch = start.getFullYear() + '年' + (start.getMonth()+1) + '月' + start.getDate() + '日~';
        } else {
            duration = Math.ceil((end.getTime() - start.getTime()) / (1000 * 3600 * 24)) + '天';
            if (start.getFullYear() == end.getFullYear()) {
                if (start.getMonth() == end.getMonth()) {
                    if (start.getDate() == end.getDate()) {
                        duration = '当天';
                        date_watch = start.getFullYear() + '年' + (start.getMonth()+1) + '月' + start.getDate() + '日';
                    } else {
                        date_watch = start.getFullYear() + '年' + (start.getMonth()+1) + '月' + start.getDate() + '~' + end.getDate() + '日';
                    }
                } else {
                    date_watch = start.getFullYear() + '年' + (start.getMonth()+1) + '月' + start.getDate() + '日~' + (end.getMonth()+1) + '月' + end.getDate() + '日';
                }
            } else {
                date_watch = start.getFullYear() + '年' + (start.getMonth()+1) + '月' + start.getDate() + '日~' + end.getFullYear() + '年' + (end.getMonth()+1) + '月' + end.getDate() + '日';
            }
        }
        
        var link = $('<a>').attr('href', '/noinfo/update_watch/?uid=' + item.id).attr('target', 'update-iframe').addClass('a-name').text(item.name);
        row.append($('<td>').addClass('td1').append(link));
        row.append($('<td>').text(item.times).addClass('td2'));
        row.append($('<td>').text(date_watch).addClass('td3'));
        row.append($('<td>').text(duration).addClass('td4'));
        row.append($('<td>').text(item.status).addClass('td5'));
        // 添加其他表格列
        $('#table tbody').append(row);
    });
}

// 表单提交更新数据
window.onload = function() {
    $('#iframe').on('load', function() {
        clickPost();
        var iUl = $('#iframe').contents().find('.notinclude');
        if(iUl.length > 0) {
            $('.button-add').css({
                'background-color': '#1E90FF',
            });
            $('#button-add').css({
                'color': '#fff',
                'cursor': 'default'
            });
            $("#button-add").hover(function() {
                $(this).css("color", "#fff"); 
            }, function() {
                $(this).css("color", "#fff");
            });
        } else {
            $('.button-add').css({
                'background-color': '#fff',
            });
            $('#button-add').css({
                'color': '#1E90FF',
                'cursor': 'pointer'
            });
            $("#button-add").hover(function() {
                $(this).css("color", "#005cb8");
            }, function() {
                $(this).css("color", "#1E90FF");
            });
        }
    });
};




